Aston Shell skinning tutorial: Taskbar, state buttons and System Tray

Taskbar skins, Tray

Aston Shell Taskbar has four states for the Taskbar itself and its elements: Simple (empty Taskbar), Active state (active window), Inactive state (inactive window), Minimized state (minimized window). System Tray area can have a separate skin although many designers use the same texture as for the Taskbar. The most popular way of skinning Taskbar is tiled skins. You'll have to make a picture with the height of your Taskbar (usually 22px or so) and 1px width. Actually it can be larger, but since horizontally the pattern is the same, you don't really need to enlarge the image.

The skin is taken from Smanic's "XBox" Theme. The actual image is smaller, but we have tiled it a bit.

Above is a sample of such a texture: 80x22 pixels. The same result can be achieved by cropping the image to 1x22 px format.

The second kind of tiled skins is slightly more complicated and requires some additional skills. This time you'll make a longer stripe, which can have a much more complex pattern. In order to make such skins look better you may need to make them seamless (look for the corresponding tutorials. Just Google for "seamless texture tutorial"). Here's such a kind of Taskbar: 363x22 px. It was created for the "Colony Theme" (by SacRat):

It's not obvious that the image is tiled

You can also create centered or even stretched Taskbar skins, but we'd not recommend doing that. Stretched skins mostly look ugly because of inevitable horizontal deformation. Skilled Theme designers try to avoid using them. Centered skins may only be useful if you make a "solid" taskbar skin (i.e. 1024 and more px width). Nevertheless in most situations big tiled skins are more than suitable. While making state buttons (active/inactive/minimized tasks) many experienced skinners follow one rule: active tasks are often highlighted (brighter than the rest) and inactive are dull. When using bevels, many prefer "pressed" images for minimized task skins.

Active, inactive and minimized tasks in SacRat's "Duality" Theme.

There're surely exclusions which look pretty nice as well. Just make sure that users won't have troubles with identifying tasks ;)

Note: don't use motley skins with complex textures on the Taskbar as this way text on them might be hard to read.

Note: with the implementation of 3PICs for Taskbar skins you can easily add bevels and flanks to them

Task button based on the "Royal" Theme mockup.

System Tray is very often skinned the same way as the Taskbar. Still, creating a separate skin for it might make it look better. With the implementation of 3PIC support in Aston 1.9.2 you can easily create beveled skins by using 3PIC flanks.

You can also skin Aston button in Tray in order to make your Theme look more consistent.

Note: Aston Tray icon must be a 24 or 8 bit bitmap with the size of 16x16 pixels in BMP or ICO format. It must not have transparent areas or otherwise the image will not be displayed. You can define separate images for both minimized and maximized Tray.

Some hints

No one forces you to create a single image for the Taskbar and System Tray. Even though it's a classic solution, you can get very interesting results by using different patterns.
Select frames for state images (active, inactive, minimized) carefully. The most popular classic schemes are: prominent, flat, concave, highlighted, normal, shaded. You can experiment with your own schemes. Just make sure they're not confusing.
If you use bevels, you can make central parts of state buttons slightly smaller than Taskbar image thus creating an interesting "embedding" effect. SacRat used this "trick" for "Aquatica 3" and "Colony" Themes.
Select fonts carefully: text must be clear and well seen on any of your Taskbar or state textures. Try to avoid using uncommon and unpopular fonts. Tahoma, Arial, Verdana and Courier are enough in most cases.